<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('我的首页')" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>资产状态占比</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart_assets"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>资产分类统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>资产维修分析</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>部门资产统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-dept"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全部</span>
                        <h5>资产总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span th:text="11111"></span></h1>
                        <div class="stat-percent font-bold text-info"> <span th:text="20230218"> </span></div>
                        <small> 截止时间(不包含报废资产)</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全部</span>
                        <h5>维修总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span th:text="1111"></span></h1>
                        <div class="stat-percent font-bold text-info"> <span th:text="20230218"> </span></div>
                        <small> 截止时间</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right"  th:text="20230218"></span>
                        <h5>待维修数</h5>
                    </div>
                    <div class="ibox-content">
                        <h2 class="text-danger"><span th:text="222"></span></h2>
                        <div class="stat-percent font-bold text-success"><span th:text="30"></span>% <i class="fa fa-bolt"></i>
                        </div>
                        <small>占比</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right" th:text="20230218"></span>
                        <h5>维修完结数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span th:text="30"></span></h1>
                        <div class="stat-percent font-bold text-navy"><span th:text="30"></span>% <i class="fa fa-bolt"></i>
                        </div>
                        <small>占比</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right" th:text="20230218"></span>
                        <h5>维修报废数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><span th:text="30"></span></h1>
                        <div class="stat-percent font-bold text-navy"><span th:text="30"></span>% <i class="fa fa-bolt"></i>
                        </div>
                        <small>占比</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="ibox-title">
                <h5>我的资产列表</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.addFull()" >
                    <i class="fa fa-plus"></i> 申请借用
                </a>
                <a class="btn btn-success" onclick="assetsSearch()" >
                    <i class="fa fa-edit"></i> 资产查询
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
      </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <th:block th:include="include :: echarts-js" />
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
	    $(document).ready(function () {
            //资产状态占比
            var dictData = [[${dictData}]];
            var dictDataValue = [[${dictDataValue}]];
            var pieChart_assets = echarts.init(document.getElementById("echarts-pie-chart_assets"));
            var pieoption_assets = {
                title : {
                    text: '资产状态占比',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:dictData
                },
                calculable : true,
                series : [
                    {
                        name:'资产状态',
                        type:'pie',
                        radius : '60%',
                        center: ['50%', '57%'],
                        data:dictDataValue
                    }
                ]
            };
            pieChart_assets.setOption(pieoption_assets);
            $(window).resize(pieChart_assets.resize);

            //资产维修情况
            var repairsNum = [[222]];
            var screpNum = [[30]];
            var doneNum = [[30]];
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            var pieoption = {
                title : {
                    text: '资产维修情况',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['维修','报废','完结']
                },
                calculable : true,
                series : [
                    {
                        name:'维修情况',
                        type:'pie',
                        radius : '60%',
                        center: ['50%', '57%'],
                        data:[
                            {value:repairsNum, name:'维修'},
                            {value:screpNum, name:'报废'},
                            {value:doneNum, name:'完结'}
                        ]
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);

            //资产分类统计
            var assetsTypeData = [[${assetsTypeData}]];
            var assetsTypeValue = [[${assetsTypeValue}]];
            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
            var baroption = {
                title : {
                    text: '资产分类统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['资产数量']
                },
                grid:{
                    x:30,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : assetsTypeData
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                color: ["#1890ff"], // 柱状图颜色
                series : [
                    {
                        name:'资产数',
                        type:'bar',
                        data:assetsTypeValue,
                        label: {
                            normal: {
                                show: true,//开启显示
                                position: 'top',//柱形上方
                                textStyle: { //数值样式
                                    color: '#8A2BE2'
                                }
                            }
                        }
                    }
                ]
            };
            barChart.setOption(baroption);
            window.onresize = barChart.resize;

            //部门资产统计
            var assetsDeptData = [[${assetsDeptData}]];
            var assetsDeptValue = [[${assetsDeptValue}]];
            var barChartDept = echarts.init(document.getElementById("echarts-bar-dept"));
            var barDeptoption = {
                title : {
                    text: '部门资产统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['资产数量']
                },
                grid:{
                    x:30,
                    x2:40,
                    y2:24
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : assetsDeptData
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                color: ["#6b9ddd"], // 柱状图颜色
                series : [
                    {
                        name:'资产数',
                        type:'bar',
                        data:assetsDeptValue,
                        label: {
                            normal: {
                                show: true,//开启显示
                                position: 'top',//柱形上方
                                textStyle: { //数值样式
                                    color: '#8A2BE2'
                                }
                            }
                        }
                    }
                ]
            };
            barChartDept.setOption(barDeptoption);
            window.onresize = barChartDept.resize;
	    });

        var prefix = ctx + "assets/presion";
        var assetsTypeDatas = [[${@dict.getType('assets_type')}]];
        var assetsStatusDatas = [[${@dict.getType('assets_status')}]];
        var userid = [[${userid}]];

        function assetsSearch() {
            $.modal.open('资产查询', prefix + "/assetsSearch");
        }

        $(function() {
            var options = {
                url: prefix + "/list",
                updateUrl: ctx + "assets/repairs/add/{id}",
                createUrl: "assets/borrow/add/"+userid,
                modalName: "我的资产",
                sortName: "createTime",
                sortOrder: "desc",
                showSearch: false,
                showPageGo: false,
                showRefresh: false,
                showColumns: false,
                showToggle: false,
                pagination:false,
                queryParams: {
                    userId: userid
                },
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '资产编号',
                        visible: true
                    },
                    {
                        field: 'assetsName',
                        title: '资产名称'
                    },
                    {
                        field: 'assetsType',
                        title: '资产类别',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(assetsTypeDatas, value);
                        }
                    },
                    {
                        field: 'assetsModel',
                        title: '规格型号'
                    },
                    {
                        field: 'assetsSn',
                        title: 'SN号'
                    },
                    {
                        field: 'createTime',
                        title: '领用时间'
                    },
                    {
                        field: 'assetsStatus',
                        title: '设备状态',
                        formatter: function(value, row, index) {
                            if(value == 3){
                                var actions = [];
                                actions.push('<span class="label label-warning">'+$.table.selectDictLabel(assetsStatusDatas, value)+'</span> ');
                                return actions.join('');

                            }else{
                                return $.table.selectDictLabel(assetsStatusDatas, value);
                            }

                        }
                    },
                    {
                        title: '操作',
                        align: 'left',
                        formatter: function(value, row, index) {
                            if(row.assetsStatus != 3 ) {
                                var actions = [];
                                actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-remove"></i>报修</a>');
                                return actions.join('');
                            }
                        }
                    }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>
